<template>
  <Panel class="network-event" :title="eventTitle" v-bind="$attrs">
    <!-- 公路事件统计 -->
    <div class="high-speed-event" v-if="showType == 'highway'">
      <div class="accident">
        <span class="name"> 交通事故</span>
        <span class="number">{{ (eventStatistic && eventStatistic.TAB1) || 0 }}</span>
      </div>
      <div class="vehicle-failure">
        <span class="name"> 车辆故障</span>
        <span class="number">{{ (eventStatistic && eventStatistic.TAB2) || 0 }}</span>
      </div>
      <div class="construction">
        <span class="name"> 施工养护</span>
        <span class="number">{{ (eventStatistic && eventStatistic.JEB1) || 0 }}</span>
      </div>
      <div class="heavy-traffic">
        <span class="name"> 大流量</span>
        <span class="number">{{ (eventStatistic && eventStatistic.TDB1TDB1) || 0 }}</span>
      </div>
      <div class="obstacles">
        <span class="name"> 障碍物</span>
        <span class="number">{{ (eventStatistic && eventStatistic.TDB2) || 0 }}</span>
      </div>
      <div class="bad-weather">
        <span class="name"> 恶劣天气</span>
        <span class="number">{{ (eventStatistic && eventStatistic.TBB1) || 0 }}</span>
      </div>
      <div class="traffic-control">
        <span class="name"> 交通管制</span>
        <span class="number">{{ (eventStatistic && eventStatistic.JGB1) || 0 }}</span>
      </div>
    </div>

    <!-- 全部事件统计 -->
    <div class="all-events" v-else>
      <!-- 突发类事件 -->
      <div class="network-event-box">
        <!-- 图标&&统计 -->
        <div class="sudden-event">
          <span class="icon"></span>
          <div class="statistical">
            <div class="name">突发类事件</div>
            <div class="number">{{ suddenEventTotal }}</div>
          </div>
        </div>
        <!-- 同环比 -->
        <div class="same-sequential">
          <SequentialSame :data="suddenSameData"></SequentialSame>
        </div>
      </div>

      <!-- 计划类事件 -->
      <div class="network-event-box">
        <!-- 图标&&统计 -->
        <div class="plan-event">
          <span class="icon"></span>
          <div class="statistical">
            <div class="name">计划类事件</div>
            <div class="number">{{ planEventTotal }}</div>
          </div>
        </div>
        <!-- 同环比 -->
        <div class="same-sequential">
          <SequentialSame :data="planSameData"></SequentialSame>
        </div>
      </div>
    </div>
  </Panel>
</template>

<script>
export default {
  name: 'Event'
}
</script>
<script setup>
/**
 * 路网事件(一级)
 * @author 阳坤（1194636148@qq.com）
 * @date   时间：2022/10/24
 */

import SequentialSame from '../../components/sequential-same/index.vue'
import Panel from '../../components/panel'
import eventApi from '../../api/event.js'
import { message } from 'ant-design-vue'
import useDefaultEmits from '@/hooks/useDefaultEmits'
import useWatchStore from '@/hooks/useWatchStore'
import store from '@/store'
import { ref, defineProps, onUnmounted, getCurrentInstance } from 'vue'
import { useInterval } from '@vueuse/core'

const props = defineProps({
  routeName: {
    // 该组件所属路由名
    type: [String],
    default: ''
  },
  // 判断显示全路网还是全部类型事件
  showType: {
    type: String, // network or highway
    default: ''
  }
})

const { proxy } = getCurrentInstance()
// 标题title
const eventTitle = props.showType == 'highway' ? '事件统计（高速）' : '路网事件'

// 突发类事件总数
const suddenEventTotal = ref()
// 计划类事件总数
const planEventTotal = ref()
// 突发类事件同环比
const suddenSameData = ref({})
// 计划类事件同环比
const planSameData = ref({})
// 各类事件统计
const eventStatistic = ref([])
// 获取高速事件定时器
const highEventTimer = ref(null)
const paramsState = ref({}) // 获取列表所需参数 areaCode cityCode

const INTERVAL_FETCH_UNIT = 60 // 定时刷新 单位秒

const { counter, pause, resume } = useInterval(1000, {
  controls: true,
  callback(count) {
    // 通知设备列表刷新
    if (count > 0 && count % INTERVAL_FETCH_UNIT == 0) {
      proxy.$bus.emit('eventRefresh')
      getData(paramsState.value)
    }
  }
})

/**
 * 获取数据
 */
const getData = (argParams, action) => {
  paramsState.value = argParams
  if (props.showType == 'highway') {
    // 运行监测-高速事件统计
    eventApi
      .getEventTypeStatistic({
        userId: store.state.user.userInfo.userId,
        province: 32,
        roadType: 1,
        eventStatus: 5,
        eventType: null
      })
      .then(res => {
        if (res.data) {
          eventStatistic.value = res.data.statisticsModelList.reduce((obj, item) => {
            obj[item.name] = item.value
            return obj
          }, {})
        }
      })
  } else {
    // 综合分析-路网事件统计
    eventApi
      .getEventStatistic({
        roadType: argParams.roadType,
        province: '32',
        city: argParams.areaCode,
        eventStatus: 5
      })
      .then(res => {
        if (res.data) {
          suddenEventTotal.value = res.data.burstType
          planEventTotal.value = res.data.planType
          // 突发类事件同环比
          suddenSameData.value = {
            ring: res.data.burstTypeHb,
            same: res.data.burstTypeTb
          }
          // 计划类事件同环比
          planSameData.value = {
            ring: res.data.planTypeHb,
            same: res.data.planTypeTb
          }
        }
      })
      .catch(() => {
        message.error(`数据获取失败！`)
      })
  }
}

/**
 * 初始化
 */
useDefaultEmits()
/**
 * 监听地市编码跟路网类型
 */
useWatchStore(getData)

onUnmounted(() => pause()) // 销毁时终止定时
</script>

<style scoped lang="less">
@import url(../../styles/themes/index.less);

.network-event {
  cursor: pointer;
  :deep(.mz-panel-content-main) {
    align-items: center;
    justify-content: center;

    .all-events {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: space-between;

      .network-event-box {
        width: 45%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;

        .sudden-event {
          .icon {
            background: url('../../assets/images/event/event-sudden.png') no-repeat;
          }

          .number {
            color: #fe3636;
          }
        }

        .plan-event {
          .icon {
            background: url('../../assets/images/event/event-plan.png') no-repeat;
          }

          .number {
            color: @primary-color;
          }
        }

        .sudden-event,
        .plan-event {
          display: flex;
          justify-content: center;
          height: 55px;
          align-items: center;

          .statistical {
            height: 100%;
            margin-left: 5px;

            .name {
              font-size: 14px;
              font-weight: 600;
              color: #333333;
              margin-bottom: 2px;
            }

            .number {
              font-size: 36px;
              font-weight: 700;
              line-height: 25px;
            }
          }

          .icon {
            width: 66px;
            height: 44px;
            background-size: 100% 100%;
            margin-right: 5px;
          }
        }

        .svg-icon {
          width: 65px;
          height: 44px;
        }

        .same-sequential {
          box-shadow: inset 0 0 0.1rem #266bf499;
          border-radius: 15px;
          padding: 2px 16px;
          height: 28px;
          align-items: center;
          display: flex;
        }
      }
    }

    .high-speed-event {
      width: 80%;
      height: 82%;
      background: url(../../assets/images/high-speed-statistics-bg.png) no-repeat;
      background-size: 100% auto;
      position: relative;

      .accident {
        left: 10%;
        bottom: 4%;
        background: url(../../assets/images/accident-bg.png) no-repeat;

        .number {
          color: #f35029;
        }
      }

      .vehicle-failure {
        right: 12%;
        bottom: 0%;
        background: url(../../assets/images/vehicle-failure-bg.png) no-repeat;

        .number {
          color: #f28410;
        }
      }

      .construction {
        right: -6%;
        top: 13%;
        background: url(../../assets/images/construction-bg.png) no-repeat;

        .number {
          color: #2eb4da;
        }
      }

      .heavy-traffic {
        right: 18%;
        top: -14%;
        background: url(../../assets/images/heavy-traffic-bg.png) no-repeat;

        .number {
          color: #1b87ee;
        }
      }

      .obstacles {
        left: 18%;
        top: -14%;
        background: url(../../assets/images/obstacles-bg.png) no-repeat;

        .number {
          color: #239def;
        }
      }

      .bad-weather {
        left: -6%;
        top: 13%;
        background: url(../../assets/images/bad-weather-bg.png) no-repeat;

        .number {
          color: #18a6d2;
        }
      }
      .traffic-control {
        left: 43%;
        top: 63%;
        background: url(../../assets/images/bad-weather-bg.png) no-repeat;

        .number {
          color: #18a6d2;
        }
      }

      .accident,
      .vehicle-failure,
      .construction,
      .heavy-traffic,
      .obstacles,
      .bad-weather,
      .traffic-control {
        position: absolute;
        display: flex;
        flex-direction: column;
        background-size: 100% 100%;
        width: 50px;
        height: 54px;
        text-align: center;

        .name {
          font-size: 11px;
          font-weight: 400;
          color: #333333;
          word-break: keep-all;
        }

        .number {
          font-size: 24px;
          font-weight: 700;
          line-height: 26px;
        }
      }
    }
  }
}
</style>
